<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            font-size: 15px;
            line-height: 15px;
            font-family: Verdana, Helvetica, Arial, sans-serif;
            color: #333333;
            background-color: #dddddd;
            overscroll-behavior: none;
        }

        .box {
            color: #333333;
            background-color: white;
            box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.8);
        }

        #container {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <div id="container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"
        integrity="sha256-gSh8eotzb/CVvCREGPUNgIWuDnTYnZvVOQnRrP1eDjI=" crossorigin="anonymous"></script>
    <script>
        var search_query = {};
        var canLoadList = [
            'pieton-1.jpg',
            'pieton-2.jpg',
            'pieton-3.jpg'
        ];
        ( function () {
            var queryStr = location.search.substring( 1 );
            if ( !queryStr ) {
                return;
            }
            var queryArr = queryStr.split( '&' );
            queryArr = queryArr.map( item => {
                if ( item ) {
                    var strItem = item.split( '=' );
                    search_query[ strItem[ 0 ] ] = strItem[ 1 ];
                }
            } );
            var isLoadQueryAsset = canLoadList.indexOf( search_query.view ) !== -1;
            if ( !isLoadQueryAsset ) {
                search_query.view = canLoadList[ 0 ];
            }
        } )()
    </script>
    <script type="text/javascript" src="/home/js/PanoControls.js"></script>
    <script>
        var camera, scene, renderer, control;

        var sphericals = [];
        var panoSphere;
        var panoModel;
        var container, mesh, material;

        var loadImag;
        init();

        animate();

        function init() {

            container = document.getElementById( 'container' );

            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 9000 );

            camera.lookAt( new THREE.Vector3( 0, 0, -1 ) );
            renderer = new THREE.WebGLRenderer( {
                alpha: true,
                antialias: true,
            } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            scene = new THREE.Scene();

            scene.add( new THREE.AmbientLight( 0xFFFFFF ) );

            control = new THREE.PanoControls( camera, renderer.domElement );
            control.enabled = true;

            material = new THREE.MeshBasicMaterial( {
                color: 0xDDDDDD,
                map: new THREE.Texture()
            } )

            // panoSphere = new THREE.Mesh(new THREE.PlaneGeometry(1024, 512), material);
            panoSphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 500, 30, 30 ), material );
            panoSphere.geometry.scale( -1, 1, 1 );
            panoSphere.rotateY( Math.PI );
            scene.add( panoSphere );

            var img = new Image();
            img.onload = function () {
                material.map.image = img;
                material.map.minFilter = THREE.LinearFilter;
                material.map.generateMipmaps = false;
                material.map.needsUpdate = true;
            }
            img.src = '/home/image/' + search_query.view;
            window.addEventListener( 'resize', onWindowResize, false );
        }
        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }


        function animate() {

            requestAnimationFrame( animate );
            update();

        }

        function update() {

            control.update();

            renderer.render( scene, camera );

        }
    </script>


</body>

</html>